import React, { useState, useEffect } from 'react';
import { findFilmsPage } from '@/api/MaiZuo';

import FilmItem from './FilmItem';
import FilmDetail from './FilmDetail';

import GlobalContext from './Context';

import './css/index.css';

export default function App() {
  const [list, setList] = useState([]);
  const [film, setFilm] = useState({});

  useEffect(() => {
    findFilmsPage().then((res) => {
      console.log(res);
      setList(res.films);
    });

    return () => {};
  }, []);

  return (
    <GlobalContext.Provider
      value={{
        film: film,
        changeFilm: (film) => setFilm(film),
      }}>
      <div className='app'>
        <div>
          {list.map((item) => {
            return (
              <FilmItem
                key={item.filmId}
                {...item}></FilmItem>
            );
          })}
        </div>
        <div>
          <FilmDetail></FilmDetail>
        </div>
      </div>
    </GlobalContext.Provider>
  );
}
